@extends('WShop::layout')

@push('styles')
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.picker.css')}}" rel="stylesheet" />
    <link href="{{asset(config('view.frontend.wap_login').'/css/mui.poppicker.css')}}" rel="stylesheet" />
@endpush
@section('content')
    @component('WShop::public.header')
        @slot('page_title'){{$page_title}} @endslot
    @endcomponent
    <div class="mui-content mui-scroll-wrapper" id="pullrefresh">
        <div class="mui-scroll">

            <div class="mui-table-view mui-table-view-chevron mui-bottom mui-fensi">
                <div class="mui-dongjie-header mui-text-center" >
                    <div class="flex">
                        <div class="flex-item mui-text-center">
                            <img src="{{asset(config('view.frontend.wap_login').'/images/shequshangji.png')}}" alt="" width="35">
                            <span class="mui-text-bai">贡献值</span>
                            <p class="mui-text-bai">{{$info->num_zt_yx ?? 0}}</p>
                        </div>
                        <div class="flex-item mui-text-center">
                            <img src="{{asset(config('view.frontend.wap_login').'/images/wodeshequ.png')}}" alt="" width="35">
                            <span class="mui-text-bai">活跃值 </span>
                            <p class="mui-text-bai">{{$info->num_td_yx ?? 0}}</p>
                        </div>
                    </div>

                </div>
                <div class="mui-fensi-center mui-text-center"><button type="button" id="xuanze">全部</button></div>
                <ul class="mui-list-unstyled mui-fensi-ul" id="pull-load" data-level="{{json_encode(config('shop.level'))}}">
                    @foreach($list as $item)
                    <li class="flex bg-fff">
{{--                        <img src="{{asset(config('view.frontend.wap_login').'/images/'.($item->tdeep-$info->tdeep).'dai.png')}}" alt="">--}}
                        <div class="mui-fensi-xx ">
                            <p>ID:{{$item->user_phone}} </p>
                            <p>编号:{{$item->user_number}} </p>
                            <p>级别:{{get_user_level($item->level)}} </p>
                            <p>星级:{{get_user_star_level($item->star_level)}} </p>
{{--                            <p>团队业绩:{{$item->yeji_team}} </p>--}}
                            <p>注册时间:{{$item->created_at}}</p>
                        </div>

                    </li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.picker.js')}}"></script>
    <script src="{{asset(config('view.frontend.wap_login').'/js/mui.poppicker.js')}}"></script>
    <script src="{{asset(config('view.plugin').'/other/utils.js')}}"></script>
    <script src="{{asset(config('view.plugin').'/other/day.js')}}"></script>
    <script>
        $('#xuanze')[0].addEventListener('tap',function(){
            var picker = new mui.PopPicker();
            var deepData = [{value:'0',text:'全部'}];
            for (var i=1;i<=1;i++){
                text = Utils.numberToChinese(i)+'代';
                var item = {value:i,text:text};
                deepData.push(item)
            }
            picker.setData(deepData);
            picker.show(function (selectItems) {
                $('#xuanze').text(selectItems[0].text)
                submitSearch(selectItems[0].value);
            });
            function submitSearch(generation) {

                var url = window.location.href;
                if(parseInt(generation)==0){
                    window.location = url;
                    return true;
                }
                if(url.indexOf("generation=") >= 1){
                    var u = url.split("generation=");
                    var e = u[1].split("&");
                    var d="";
                    if(e.length > 1){
                        for(var i=0;i<e.length-1;i++){
                            d += "&"+e[i+1];
                        }
                    }
                    var url = u[0] + "generation=" + generation+d;
                }else{
                    if(url.indexOf("?") >= 1){
                        url = url+"&generation="+generation;
                    }else{
                        url = url+"?generation="+generation;
                    }
                }

                window.location = url;
                return true;
            }
        })
    </script>
    <script>
        var goodsItemTpl = '<li class="flex bg-fff">\n' +
            '<img src="{{asset(config('view.frontend.wap_login').'/images/{%deep%}dai.png')}}" alt="">\n' +
            '<div class="mui-fensi-xx ">\n' +
            '<p>ID:{%user_phone%} </p>\n' +
            '<p>昵称:{%nickname%} </p>\n' +
            '<p>级别:{%level%} </p>\n' +
            '<p>注册时间:{%created_at%}</p>\n' +
            '</div></li>'

        var pageNum = 1;
        var levelName = $('#pull-load').data('level');
        mui.init({
            pullRefresh : {
                container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                up : {
                    style: 'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
                    color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
                    height: '50px',//可选,默认50px.下拉刷新控件的高度,
                    range: '100px', //可选 默认100px,控件可下拉拖拽的范围
                    offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
                    contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    auto: false,//可选,默认false.首次加载自动上拉刷新一次
                    callback: function () {
                        pageNum = pageNum+1;
                        url = handleUrl(pageNum);
                        $.ajax({
                            type: 'get',
                            url: url,
                            dataType: 'json',
                        }).done(function (response) {

                            if(response.status){
                                data = response.data.list;
                                var len = data.length;
                                if(len<1){
                                    mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
                                    mui('#pullrefresh').pullRefresh().disablePullupToRefresh();
                                    return true;
                                }
                                for (var i=0; i<len; i++){
                                    var deep = parseInt(data[i]['tdeep'])-parseInt("{{$info->tdeep}}");
                                    var goodsItem = goodsItemTpl;
                                    goodsItem = goodsItem.replace('{%deep%}',deep)
                                        .replace('{%user_phone%}',data[i]['user_phone'])
                                        .replace('{%nickname%}',data[i]['nickname'])
                                        .replace('{%level%}',levelName[data[i]['level']])
                                        .replace('{%created_at%}',dayjs(data[i]['created_at']*1000).format('YYYY-MM-DD HH:mm:ss'));
                                    $("#pull-load").append(goodsItem);
                                }
                            }
                            mui('#pullrefresh').pullRefresh().endPullupToRefresh(false);

                            mui('#pullrefresh').pullRefresh().refresh(true);

                        }).fail(function (XMLHttpRequest) {
                            tooltips('网络异常,请检查连接');

                        }).always(function () {

                        });

                    }
                }
            }
        });

        function handleUrl(pageNum) {
            var url = window.location.href;
            if(url.indexOf("page_num=") >= 1){
                var u = url.split("page_num=");
            }else{
                if(url.indexOf("?") >= 1){
                    url = url+"&page_num="+pageNum;
                }else{
                    url = url+"?page_num="+pageNum;
                }
            }
            if(u) {
                var e = u[1].split("&");
                var d="";
                if(e.length > 1){
                    for(var i=0;i<e.length-1;i++){
                        d += "&"+e[i+1];
                    }
                }
                var url = u[0] + "page_num=" + pageNum+d;
            }

            return url
        }
    </script>
@endpush